import React, { Component } from 'react';
import style from './event.module.css';

export default class EventDemo extends Component {
    
    componentDidMount() {
        this.refs.red.addEventListener('click',function(){
            console.log("red")
        },false)
        this.refs.blue.addEventListener('click',function(){
            console.log("blue")
        },false)
        this.refs.green.addEventListener('click',function(){
            console.log("green")
        },false)
    }
    
    render() {
        return (
            <div>
                <div className={style.red} ref="red" onClickCapture={this.red}>
                    <div className={style.blue} ref="blue" onClickCapture={this.blue}>
                        <div className={style.green} ref="green" onClickCapture={this.green}></div>
                    </div>
                </div>
            </div>
        )
    }

    red = (e) => {
        console.log('react -  red');
        console.log(e.target);
        console.log(e.currentTarget);
    }

    green = () => {
        console.log('react - green')
    }

    blue = () => {
        console.log('react-blue')
    }
}

